<template>
  <div class="box">
    <h4 class="title">咿呀口腔{{ clinic }}就诊病历</h4>
    <div class="main">
      <div class="header">
        <div class="headerFirst" style="margintop: 10px">
          <div>姓名：{{ data.name }}</div>
          <div>
            性别：{{ data.sex == 1 ? '男' : data.sex == 2 ? '女' : '未知' }}
          </div>
          <div>年龄：{{ data.age }}</div>
        </div>
        <div class="headerSecond" style="marginbottom: 10px; border-top: 0px">
          <div>就诊时间：{{ data.clinicTime }}</div>
          <div>病历号：{{ data.caseNumber }}</div>
          <div>医生: {{ data.doctor }}</div>
        </div>
      </div>
      <div class="center">
        <div v-if="data.type == 0" class="line">
          <div class="lineFirst">主述：</div>
          <div class="lineSecond">{{ data.mainNarrate }}</div>
        </div>
        <div v-if="data.type == 0" class="line">
          <div class="lineFirst">现病史：</div>
          <div>{{ data.nowMedicalHistory }}</div>
        </div>
        <div v-if="data.type == 0" class="line">
          <div class="lineFirst">既往史：</div>
          <div>
            {{ data.passMedicalHistory }}
          </div>
        </div>
        <div v-if="data.type == 1" class="line">
          <div class="lineFirst">复诊：</div>
          <div>
            {{ data.mainNarrate }}
          </div>
        </div>
        <div v-if="data.detail">
          <div
            v-for="(item, i) in data.detail.mouthExamine"
            :key="i + 'a'"
            class="line"
          >
            <div class="lineFirst">口腔检查:</div>
            <div class="first">
              <div v-if="item.position" class="startDiv">
                <div class="leftTop">
                  {{ item.position.split('|')[0].toString() }}
                </div>
                <div class="rightTop">
                  {{ item.position.split('|')[1].toString() }}
                </div>
                <div class="leftBtn">
                  {{ item.position.split('|')[2].toString() }}
                </div>
                <div class="rightBtn">
                  {{ item.position.split('|')[3].toString() }}
                </div>
              </div>
              <div v-else class="startDiv">
                <div class="leftTop"></div>
                <div class="rightTop"></div>
                <div class="leftBtn"></div>
                <div class="rightBtn"></div>
              </div>
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
          <div
            v-for="(item, ins) in data.detail.subsidiaryExamine"
            :key="ins + 'b'"
            class="line"
          >
            <div class="lineFirst">辅助检查:</div>
            <div class="first">
              <div v-if="item.position" class="startDiv" style="width=20%">
                <div class="leftTop">
                  {{ item.position.split('|')[0].toString() }}
                </div>
                <div class="rightTop">
                  {{ item.position.split('|')[1].toString() }}
                </div>
                <div class="leftBtn">
                  {{ item.position.split('|')[2].toString() }}
                </div>
                <div class="rightBtn">
                  {{ item.position.split('|')[3].toString() }}
                </div>
              </div>
              <div v-else class="startDiv">
                <div class="leftTop"></div>
                <div class="rightTop"></div>
                <div class="leftBtn"></div>
                <div class="rightBtn"></div>
              </div>
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
          <div
            v-for="(item, ind) in data.detail.diagnose"
            :key="ind + 'c'"
            class="line"
          >
            <div class="lineFirst">诊断:</div>
            <div class="first">
              <div v-if="item.position" class="startDiv" style="width=20%">
                <div class="leftTop">
                  {{ item.position.split('|')[0].toString() }}
                </div>
                <div class="rightTop">
                  {{ item.position.split('|')[1].toString() }}
                </div>
                <div class="leftBtn">
                  {{ item.position.split('|')[2].toString() }}
                </div>
                <div class="rightBtn">
                  {{ item.position.split('|')[3].toString() }}
                </div>
              </div>
              <div v-else class="startDiv">
                <div class="leftTop"></div>
                <div class="rightTop"></div>
                <div class="leftBtn"></div>
                <div class="rightBtn"></div>
              </div>
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
          <div
            v-for="(item, inde) in data.detail.curePlan"
            :key="inde + 'd'"
            class="line"
          >
            <div class="lineFirst">治疗计划:</div>
            <div class="first">
              <div v-if="item.position" class="startDiv" style="width=20%">
                <div class="leftTop">
                  {{ item.position.split('|')[0].toString() }}
                </div>
                <div class="rightTop">
                  {{ item.position.split('|')[1].toString() }}
                </div>
                <div class="leftBtn">
                  {{ item.position.split('|')[2].toString() }}
                </div>
                <div class="rightBtn">
                  {{ item.position.split('|')[3].toString() }}
                </div>
              </div>
              <div v-else class="startDiv">
                <div class="leftTop"></div>
                <div class="rightTop"></div>
                <div class="leftBtn"></div>
                <div class="rightBtn"></div>
              </div>
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
          <div
            v-for="(item, index) in data.detail.dispose"
            :key="index + 'e'"
            class="line"
          >
            <div class="lineFirst">处置:</div>
            <div class="first">
              <div v-if="item.position" class="startDiv" style="width=20%">
                <div class="leftTop">
                  {{ item.position.split('|')[0].toString() }}
                </div>
                <div class="rightTop">
                  {{ item.position.split('|')[1].toString() }}
                </div>
                <div class="leftBtn">
                  {{ item.position.split('|')[2].toString() }}
                </div>
                <div class="rightBtn">
                  {{ item.position.split('|')[3].toString() }}
                </div>
              </div>
              <div v-else class="startDiv">
                <div class="leftTop"></div>
                <div class="rightTop"></div>
                <div class="leftBtn"></div>
                <div class="rightBtn"></div>
              </div>
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
        <div class="line">
          <div class="lineFirst">医嘱：</div>
          <div>{{ data.doctorAdvice }}</div>
        </div>
        <div class="line" style="marginbottom: 30px">
          <div class="lineFirst">备注：</div>
          <div>{{ data.remarks }}</div>
        </div>
      </div>
      <div class="footer">
        <div class="headerFirst">
          <div>地址：{{ clinicMsg.address }}</div>
          <div>电话：{{ clinicMsg.phone }}</div>
        </div>
        <div class="headerSecond" style="border-top: 0px">
          <div>患者签字：</div>
          <div>医生签字：</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getClinicId } from '@/utils/clinic'

export default {
  /** 到店——医生随访——病例  */
  name: 'Case',
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      clinicMsg: {},
    }
  },
  computed: {
    ...mapGetters(['clinic']),
  },
  mounted() {
    this.getClinicMsg()
  },
  methods: {
    async getClinicMsg() {
      const { data } = await this.$store.dispatch('getClinic', getClinicId())
      this.clinicMsg = data
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  .title {
    text-align: center;
    letter-spacing: 1.5em;
  }
  .main {
    display: flex;
    flex-direction: column;
    .header {
      display: flex;
      flex-direction: column;
      margin: 10px 0;
      .headerFirst,
      .headerSecond {
        display: flex;
        justify-content: space-around;
        width: 100%;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        height: 40px;
        line-height: 40px;
        div {
          width: 33%;
          text-align: center;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
      }
    }
    .center {
      display: flex;
      flex-direction: column;
      .line {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        line-height: 34px;
        margin-top: 6px;
        .lineFirst {
          display: flex;
          flex-shrink: 0;
          width: 100px;
        }
        .lineSecond {
          width: 100%;
        }
        .first {
          display: flex;
          width: 100%;
          .startDiv {
            display: flex;
            flex-wrap: wrap;
            flex-shrink: 0;
            flex-direction: row;
            justify-content: space;
            width: 266px;
            height: 30px;
            text-align: center;
            margin-right: 18px;
            div {
              line-height: 15px;
              width: 50%;
              height: 50%;
              text-align: center;
            }
            .leftTop {
              border-right: 1px solid #666;
              border-bottom: 1px solid #666;
            }
            .rightTop {
              border-left: 1px solid #666;
              border-bottom: 1px solid #666;
            }
            .leftBtn {
              border-right: 1px solid #666;
              border-top: 1px solid #666;
            }
            .rightBtn {
              border-left: 1px solid #666;
              border-top: 1px solid #666;
            }
          }
        }
      }
    }
    .footer {
      display: flex;
      flex-direction: column;
      .headerFirst,
      .headerSecond {
        display: flex;
        justify-content: space-around;
        width: 100%;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        height: 40px;
        line-height: 40px;
        div {
          width: 50%;
          text-align: center;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
      }
    }
  }
}
</style>
